<template>
    <div id="map">
    </div>
</template>

<script setup>
    import Map from 'ol/Map';
    import TileLayer from 'ol/layer/WebGLTile';
    import View from 'ol/View';
    import GeoJSON from 'ol/format/GeoJSON';
    import {Stroke, Style, Fill, Circle} from 'ol/style';
    import {Vector as VectorLayer} from 'ol/layer';
    import Icon from 'ol/style/Icon';
    import icon from '../image/icon.png'
    import VectorSource from "ol/source/Vector";
    import { XYZ } from "ol/source";
    import { onMounted} from "vue";

    /**
     *矢量几何要素的样式
     */
    let image = new Circle({
      radius: 5,
      fill: null,
      stroke: new Stroke({color: 'red', width: 1})
    });
    let styles = {
      'Point': [
        new Style({
          //点样式
          image: new Icon({src:icon})
        })
      ],
      'LineString': [
        new Style({
          stroke: new Stroke({
            //线的边界样式
            color: 'green',
            width: 1
          })
        })
      ],
      'MultiLineString': [
        new Style({
          stroke: new Stroke({
            //多线的边界样式
            color: 'green',
            width: 1
          })
        })
      ],
      'MultiPoint': [
        new Style({
          //多点的点样式
          image: image
        })
      ],
      'MultiPolygon': [
        new Style({
          stroke: new Stroke({
            //多区的边界样式
            color: 'yellow',
            width: 1
          }),
          fill: new Fill({
            //多区的填充样式
            color: 'rgba(255, 255, 0, 0.1)'
          })
        })
      ],
      'Polygon': [
        new Style({
          stroke: new Stroke({
            //区的边界样式
            color: 'blue',
            lineDash: [4],
            width: 3
          }),
          fill: new Fill({
            //区的填充样式
            color: 'rgba(0, 0, 255, 0.1)'
          })
        })
      ],
      'GeometryCollection': [
        new Style({
          stroke: new Stroke({
            //集合要素的边界样式
            color: 'magenta',
            width: 2
          }),
          fill: new Fill({
            //集合要素的填充样式
            color: 'magenta'
          }),
          image: new Circle({
            //集合要素的点样式
            radius: 10,
            fill: null,
            stroke: new Stroke({
              color: 'magenta'
            })
          })
        })
      ],
      'Circle': [
        new Style({
          stroke: new Stroke({
            //圆的边界样式
            color: 'red',
            width: 2
          }),
          fill: new Fill({
            //圆的填充样式
            color: 'rgba(255,0,0,0.2)'
          })
        })
      ]
    };

    const stylesFunction = feature => {
      return styles[feature.getGeometry().getType()];
    }
    onMounted(() => {
      const map = new Map({
        target:'map',
        layers: [
          new TileLayer({
            source: new XYZ({url: "http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69"}),
          }),
          new VectorLayer({
            source: new VectorSource({
              format: new GeoJSON(),
              url: 'https://openlayers.org/en/latest/examples/data/geojson/world-cities.geojson',
            }),
            style: stylesFunction
          })
        ],
        //配置视图
        view: new View({
          center: [0, 0],
          zoom: 0,
        }),
      })
    })
</script>


<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }

    .MapTool {
        position: absolute;
        top: .5em;
        right: .5em;
        z-index: 9999;
    }
</style>